<template>
  <div class="refund-form-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>退款申请</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-form :model="refundForm" :rules="rules" ref="refundForm" label-width="120px">
        <el-form-item label="账单编号">
          <el-input v-model="refundForm.billId" disabled></el-input>
        </el-form-item>
        <el-form-item label="退款金额">
          <el-input v-model="refundForm.amount" disabled></el-input>
        </el-form-item>
        <el-form-item label="退款原因" prop="reason">
          <el-input type="textarea" v-model="refundForm.reason" placeholder="请输入退款原因(5-100字)" :rows="4" maxlength="100"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'RefundForm',
  data() {
    return {
      refundForm: {
        billId: '',
        amount: '',
        reason: ''
      },
      rules: {
        reason: [
          { required: true, message: '请输入退款原因', trigger: 'blur' },
          { min: 5, max: 100, message: '长度在5到100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.refundForm.billId = this.$route.query.billId;
    this.refundForm.amount = this.$route.query.amount;
  },
  methods: {
    submitForm() {
      // this.$refs.refundForm.validate(valid => {
      //   if (valid) {
      //     request.post('/bill/refund', this.refundForm)
      //       .then(res => {
      //         if (res.code === 200) {
      //           this.$message.success('退款申请已提交');
      //           this.$router.go(-1);
      //         }
      //       });
      //   }
      // });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.refund-form-container {
  padding: 20px;
}

.box-card {
  max-width: 800px;
  margin: 0 auto;
}
</style>
